<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8"/>
		<title>雪梨作业</title>
		<style type="text/css">
		.one{
            list-style-type:square; 
        }
		.all{
            border: 2px black solid;
            width: 120px;height: 450px;
            margin: 0 auto;
        }
        #backChoose{
            display: inline-block;
            padding:0;
            margin:0;
            margin-left: 10px;
            color:rgb(0, 195, 255);
        }
        #backChoose:active{
            color:red;
        }
		</style>
	</head>
	<body>
	    <div class="all">
		<form>
			<input type ="checkbox" name="option" value="dan" id="chooseAll"><b id="all">全选</b><p id="backChoose">反选</p><br/><hr/>
			<input type="checkbox" name="choose" value="一" class="choose">选项(一)<br/><br/>
	        <input type="checkbox" name="choose" value="二" class="choose">选项(二)<br/><br/>
			<input type="checkbox" name="choose" value="三" class="choose">选项(三)<br/><br/>
			<input type="checkbox" name="choose" value="四" class="choose">选项(四)<br/><br/>
			<input type="checkbox" name="choose" value="五" class="choose">选项(五)<br/><br/>
			<input type="checkbox" name="choose" value="六" class="choose">选项(六)<br/><br/>
			<input type="checkbox" name="choose" value="七" class="choose">选项(七)<br/><br/>
			<input type="checkbox" name="choose" value="八" class="choose">选项(八)<br/><br/>
			<input type="checkbox" name="choose" value="九" class="choose">选项(九)<br/><br/>
			<input type="checkbox" name="choose" value="十" class="choose">选项(十)
		</form>
		</div>
	</body>
	<script type="text/javascript">
        var chooseAll=document.getElementById("chooseAll");
        var choose=document.getElementsByClassName("choose");
        var backChoose=document.getElementById("backChoose");
        var all=document.getElementById("all");
        var i=0;
        var number;
        chooseAll.onclick=function(){
            if(chooseAll.checked==false){
                all.innerHTML="全选";
                for(i=0;i<10;i++){
                    choose[i].checked=false;
                }
            }else{
                all.innerHTML="全不选";
                for(i=0;i<10;i++){
                    choose[i].checked=true;
                }
            }
        }
        backChoose.onclick=function(){
            for(i=0;i<10;i++){
                if(choose[i].checked==false){
                    choose[i].checked=true;
                }else{
                    choose[i].checked=false;
                }
            } 
        }
        for(i=0;i<10;i++){
            choose[i].onclick=function(){
                number=0;
                for (var j=0;j<10;j++){
                    if(choose[j].checked==true){
                        number++;
                    }
                }
                if(number==10){
                    all.innerHTML="全不选";
                    chooseAll.checked=true;
                }else{
                    all.innerHTML="全选";
                    chooseAll.checked=false;
                }
            } 
        }
	</script>
</html>